<template>
	<view>
		<z-paging ref="paging" v-model="dataList" @query="queryList">
			
			<template #top>
				<zy-title title="人气榜"></zy-title>
			</template>
			<!-- <custom-waterfalls-flow ref="waterfallsFlowRef" :value="list" >
			</custom-waterfalls-flow> -->
		
			<view class="zy-row-wrap" style="padding: 0 5rpx;">
				<view class="item" :class="{'one': index==0}" v-for="(item, index) in dataList" :key="index">
					<view style="background-color: #000000;" v-if="index==1">
						<view class="zy-row-center" style="font-size: 40rpx; color: #F3D267; font-weight: bold; margin-top: 20rpx;">榜单第一名</view>
						<view class="zy-row-center" style="font-size: 26rpx; color: #F3D267; font-weight: 400; margin-top: 10rpx; margin-bottom: 30rpx;">TeAi中的万分之一的榜首</view>
					</view>
					<image class="img" :src="item.headPicUrl" mode="aspectFill"></image>
					<view class="zy-btn-yellow-radius-right" style="position: absolute; top: 20rpx;">#{{index+1}}</view>
					<view class="zy-column-end zy-pl" style="position: absolute; bottom: 0; left:0; right: 0; height: 200rpx;">
						<view class="zy-row zy-mb-sm">
							<view class="zy-text-white zy-font-bold">一只小西瓜</view>
							<image class="zy-icon zy-ml-sm" mode="widthFix" :src="getImageUrl('ic_crown.png')"></image>
						</view>
						<view class="zy-row zy-mb-lg">
							<image class="zy-icon-sm" mode="widthFix" :src="getImageUrl('ic_gift_white.png')"></image>
							<view class="zy-text-white-sm zy-ml-sm zy-font-bold">669894</view>
						</view>
					</view>
				</view>
			</view>
			
			</z-paging>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList: [],
				list:[]
			};
		},
		onLoad() {
			this.queryList(1, 30)
		},
		methods: {
			queryList(pageNo, pageSize) {
				const params = {
					pageNo: pageNo,
				}
				uni.$http.get("/api/visitor/visitorList", params)
					.then(res => {
						this.$refs.paging.complete(res.data.results);
						this.list = res.data.results
					}).catch(res => {
						this.$refs.paging.complete(false);
					})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.item{
		position: relative; 
		width: 360rpx; 
		margin: 5rpx;
		float: left;
	}
	
	.img{
		position: absolute;
		width: 360rpx;
		height: 480rpx; 
		z-index: -1;
	}
	
	.item.one{
		width: 750rpx;
		height: 989rpx; 
		margin: 0 0 5rpx 0;
	}

</style>
